<template>
	<view>
		<uni-nav-bar :border="false" :fixed="true" @clickRight="openAddInput">
			<view class="flex align-center justify-center font-weight-bold 	w-100" >
				<view class="font-weight-bold mx-2" v-for="(item,index) in tabBar":key="index" 
				:class="index===tabIndex ?'text-main font-lg  ':'font-md  '"
				@click="changeTab(index)"> {{item.name}} </view>
				<!-- <view class="font-md text-light-muted mx-1"> 话题 </view> -->
			</view>
			<text slot="right" class="iconfont  iconfatie"></text>
		</uni-nav-bar>
		<!-- 开发区域 -->
		<swiper :duration="1000"  :style="'height:'+scrollH+'px;'">
			<swiper-item>
				<scroll-view scroll-y="true" class="bg"  :style="'height:'+scrollH+'px;'"  >
					<view v-for="i in 100":key="i"  style="color:white">
						{{i}}
					</view>
				</scroll-view>
			</swiper-item>
			 
		</swiper>
	</view>
</template>

<script>
	// 引入自定义导航栏
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue'
	export default {
	components:{uniNavBar},
		data() {
			return {
				// 默认的内容区域高度
				scrollH:500,
				tabBar:[
					{name:"关注"},
					{name:"话题"}
				],
				tabIndex:0
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success:(res)=> {
					console.log(res.windowHeight)
					// statusBarHeight状态栏的高度就是蓝牙电量wifi等状态栏  -导航栏的高度(关注话题的高度)
					this.scrollH=res.windowHeight - res.statusBarHeight - 44
				}
			})
		},
		methods: {
			
			// 切换导航栏切换
			changeTab(index){
				this.tabIndex=index
			},
			openAddInput(){
				uni.navigateTo({
					url:"../add-input/add-input"
				})
			}
		}
	}
</script>

<style>
.bg{background-color: #000000;}
</style>
